<!-- 键盘 -->
<template>
	<view class="keyboard-pof width100">
		<view class="keyboard">
			<view class="f-background border-ra" :class="item.class" v-for="(item,index) in keyList" :key="index">
				<u-button @click="onInputPrice(item.type,item.name)" :style="{widht: '100%',height: '100%'}" type="primary"
					:color="item.type == 'verify' ? `linear-gradient(180deg, #FF4C4C 0%, #EB0000 100%)` : '#ffffff'">
					<!-- <image class="num-bufen-img" src="@/static/icons/dlid.png" mode="" v-if="item.type == 'delete'">
					</image> -->
					<!-- <text class=" font-weight size-40" :class="{'color-f' : item.type == 'verify' }" v-else>
						{{item.type == 'verify' ? '确认' : item.name}}
					</text> -->
				</u-button>
			</view>
		</view>
		<view class="inset-bottom"></view>
	</view>
</template>

<script>
	import { twoDecimalPlaces } from '@/utils/index'
	export default {
		props: {
			orderAmt: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				amount: '',
				keyList: [
					{ name: 1, type: 'key' },
					{ name: 2, type: 'key' },
					{ name: 3, type: 'key' },
					{ name: "", type: 'delete' },
					{ name: 4, type: 'key' },
					{ name: 5, type: 'key' },
					{ name: 6, type: 'key' },
					{ name: "", type: 'verify', class: 'confirm' },
					{ name: 7, type: 'key' },
					{ name: 8, type: 'key' },
					{ name: 9, type: 'key' },
					{ name: 0, type: 'key', class: 'narrow' },
					{ name: "·", type: '.' }
				]
				// amount: '',
				// priceLin: ''
			}
		},
		watch: {
			// price(val, index) {
			// 	console.log('val', val)
			// }
		},
		components: {},
		methods: {
			onInputPrice(key, item) {
				let { amount } = this;
				amount = this.orderAmt
				// 等于输入的时候
				if (key == 'key') this.amount = twoDecimalPlaces(amount + String(item), 2, false,9999)
				else if (key == 'delete') {
					this.amount = amount.substring(0, amount.length - 1)
				}
				this.$emit('inputPrice', { key: key, amount: this.amount })
			}
		}
	}
</script>

<style lang="scss">
	.keyboard-pof {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
	}

	.keyboard {
		padding: 10rpx;
		background: #F0F0F0;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: minmax(108rpx, 108rpx);
		gap: 10rpx;

		/* 行高自适应，但最小为50px */
		.inset-bottom {
			grid-column: span 4;
		}

		.confirm {
			grid-row: span 3;
		}

		.narrow {
			grid-column: span 2;
		}

		.border-ra {
			border-radius: 12rpx;
		}

		.num-bufen-img {
			width: 56rpx;
			height: 56rpx;
		}
	}
</style>